<template>
	<section class="info">
		<el-image
			:src="`http://ikun-pro-ui.fun:3000/static/${infoClass.info?.value?.img}`"
			style="width: 40px; height: 40px; border: 1px solid #cccccc; border-radius: 100%"
			loading="lazy"
			previewTeleported
		/>
		<h4>{{ infoClass.info?.value?.username }}</h4>
		<h5 title="个人介绍">{{ infoClass.info?.value?.nickname }}</h5>
		<div style="display: flex; justify-content: space-around; width: 100%">
			<div class="card-box">
				<div>{{ infoClass.info?.value?.articlesAccount ?? 0 }}</div>
				<div>文章</div>
			</div>
			<div class="card-box">
				<div>{{ infoClass.info?.value?.atricles?.length ?? 0 }}</div>
				<div>分类</div>
			</div>
			<div class="card-box">
				<div>{{ infoClass.info?.value?.atricles?.length ?? 0 }}</div>
				<div>标签</div>
			</div>
			<div class="card-box">
				<div>{{ infoClass.info?.value?.atricles?.length ?? 0 }}</div>
				<div>访问量</div>
			</div>
		</div>
		<div style="margin-top: 10px">
			<img class="github" alt="" @click="infoClass.github()" />
			<img class="gitee" alt="" @click="infoClass.gitee()" />
			<img class="zh" alt="" @click="infoClass.zh()" />
			<img class="csdn" alt="" @click="infoClass.csdn()" />
		</div>
	</section>
</template>
<script lang="ts" setup>
import { InfoClass } from './controller'
let infoClass = new InfoClass()
</script>
<style src="./index.scss"></style>
